<template>
  <!-- 我的订单页面 -->
  <div class="container">
    <!-- 骨架屏 -->
    <div>
      <skeleton :skeletonFlag="skeletonFlag"></skeleton>
    </div>

    <!-- 可定义多个tab标签切换 -->
    <!-- <van-tabs sticky>
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
    </van-tabs> -->
    <!-- <div class="list-title">全部订单</div> -->
    <div class="list-wrap" v-for="(item, index) in listData" :key="index">
      <van-panel :status="item.status" use-footer-slot>
        <view class="commodity-wrap">
          <div class="commodity-img" @click="toProductPage(item.link)">
            <img :src="item.thumb">
          </div>
          <div class="commodity-content">
            <div class="commodity-title">{{item.title}}</div>
            <!-- 产品规格颜色 -->
            <div class="commodity-spec">{{item.spec}}</div>
          </div>

          <!-- 右侧价格 -->
          <div class="commodity-price">
            <div class="oldPrice">{{MoneySymbol}}{{item.price}}</div>
            <div class="num">x {{item.num}}</div>
          </div>
        </view>

        <!-- 底部扩展显示 -->
        <view slot="footer">
          <div class="commodity-user-price">
            <div class="user-img"></div>
            <div class="commodity-user-price-right">
              实付:{{MoneySymbol}}{{item.price*item.num}} (免运费)
            </div>
          </div>

          <div class="footer-btn">
            <span v-show="item.orderType == 0">
              <button class="googs-cancel" @click.stop="goodsCancel(item.link)">取消订单</button>
            </span>
            <span v-show="item.orderType == 0">
              <button class="googs-buy" @click.stop="goodsBuy(item)">去支付</button>
            </span>

            <span v-show="item.orderType == 2">
              <button class="googs-buy" @click.stop="goodsConfirm(item.link)">确认收货</button>
            </span>
          </div>
        </view>
      </van-panel>
    </div>

    <!-- 底部加载更多提示 -->
    <div>
      <listLoading :pageMoreFlag="pageMoreFlag"></listLoading>
    </div>

  </div>
</template>

<script>
import {
  fetch, hideLoading, bindViewTap, closeSkeleton
} from '@/utils/index' // 引入公用库
import { getIndexList, getUrl } from '@/utils/api' // 请求封装公用库
import TYPES from '@/constant/index' // 常量文件
import store from '@/utils/store' // 全局状态管理

// 自定义组件，底部加载提示
import listLoading from '@/components/listLoading'
import skeleton from '@/components/skeleton'

export default {
  data () {
    return {
      listData: [], // 订单列表数据
      pageCountPage: 1, // 存放拉取数据页面，上拉使用
      pageMoreFlag: true, // 控制显示没有更多
      skeletonFlag: true, // 骨架屏
      MoneySymbol: TYPES.goodsData.MoneySymbol // 存金额前缀符号
    }
  },
  components: {
    listLoading, skeleton
  },
  // 定义自定义函数
  methods: {
    // 跳转商品详情页面
    toProductPage (link) {
      bindViewTap(`../productPage/main?id=${link}`, true)
    },
    // TODO: 取消订单按钮
    goodsCancel (link) {
      console.log('取消订单', link)
    },
    // 支付订单按钮
    goodsBuy (itemData) {
      console.log('支付订单', itemData)
      // 把商品数据存放到vuex
      store.dispatch('forPay', itemData)
      // 传入参数就是vuex里面的forPay商品数据，不传入就是单个商品（读取的是缓存数据）
      bindViewTap(`../buyPage/main?arrFlag=forPay`, true)
    },
    // 确认收货按钮
    goodsConfirm (link) {
      console.log('确认订单', link)
    }
  },
  // 在实例创建完成后被立即调用
  mounted () {
    // 请求订单列表数据
    fetch(getUrl('/userOrderList'), {
      method: 'post'
    }).then(data => {
      this.listData = data.data || [] // 保存数据直接渲染
    }).then(() => {
      // 关闭遮罩层加载中，公用库内的方法（封装好的）
      hideLoading(300)
    }).then(() => {
      // 关闭骨架屏
      closeSkeleton(this)
    })
  },
  // 底部下拉请求更多文章列表数据（微信生命周期）
  onReachBottom (e) {
    // 请求商品列表数据
    fetch(getIndexList('/userOrderList', {
      // 每次根据上一次累加页数
      page: this.pageCountPage += 1
    }), { method: 'post' }).then(data => {
      if (data.data) {
        // 合并后面请求到的数据
        this.listData = [...this.listData, ...data.data]// 保存数据直接渲染
      } else {
        this.pageMoreFlag = false // 控制显示 没有更多内容了
      }
    }).then(() => {
      // 关闭遮罩层加载中,自定义延迟关闭时间
      hideLoading(300)
    })
  }
}
</script>

<style scope>
page {
  background-color: rgb(248, 248, 248);
  color: #000;
}
.container {
  font-size: 30rpx;
  margin-bottom: 100rpx;
}
/* 列表每个商品标题 */
.list-title {
  height: 70rpx;
  line-height: 70rpx;
  padding-left: 26rpx;
  background: #fff;
}
.list-wrap {
  margin-bottom: 10rpx;
}
/* 商品信息 */
.commodity-wrap {
  position: relative;
  display: flex;
  height: 180rpx;
  padding: 14rpx 18rpx 14rpx 22rpx;
  box-sizing: border-box;
  background-color: rgb(248, 248, 248);
}
.commodity-wrap .commodity-img {
  overflow: hidden;
  flex: 180rpx 0 180rpx;
}
.commodity-wrap .commodity-img img{
  width: 180rpx;
  height: 180rpx;
}
.commodity-wrap .commodity-content{
  overflow: hidden;
  box-sizing: border-box;
  flex: 1;
  margin: 0 130rpx 0 20rpx;
  font-size: 24rpx;
}
/* 商品标题及规格 */
.commodity-content .commodity-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-bottom: 10rpx;
}
.commodity-content .commodity-spec {
  color: #7d7e80;
}
/* 右侧价格及数量 */
.commodity-wrap .commodity-price {
  position: absolute;
  top:18rpx;
  right:28rpx;
  font-size:24rpx;
  text-align: right;
}
/* .commodity-wrap .oldPrice {
} */
.commodity-wrap .num {
  line-height: 60rpx;
}
/* 商品卡片实付栏 */
.commodity-user-price {
  padding-bottom: 10rpx;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  text-align: right;
  border-bottom: 1PX solid rgba(190,190,190,.4);
}
/* 底部按钮栏 */
.footer-btn {
  position: relative;
  text-align: right;

}
.googs-cancel, .googs-buy {
  display: inline-block;
  margin-top: 20rpx;
  text-align: center;
  width: 150rpx;
  font-size: 22rpx;
}
.googs-buy {
  margin-left: 18rpx;
  background: #E2C573;
  /* color: #fff; */
}
</style>
